import FillColorInfo from "./FillColorInfo";
import CaptureComp from "../../../engine/comps/CaptureComp";


class ImageData {
    width: number;
    height: number;
    data: Uint8ClampedArray
}
const { ccclass, property } = cc._decorator;

@ccclass
export default class FillColorToolV2 extends cc.Component {

    // @property(cc.Color)
    // color: cc.Color = null;

    @property(cc.Graphics)
    g: cc.Graphics = null;

    @property(cc.Sprite)
    pic_sprite: cc.Sprite = null;

    @property(CaptureComp)
    capture: CaptureComp = null;



    @property
    fileName: string = 'test.json'

    private pointList: cc.Vec2[] = []

    @property
    group: number = 0;
    onLoad() {

    }
    private colorGroup: FillColorInfo[][] = []

    private imageData: ImageData = null;
    start() {

        this.node.on(cc.Node.EventType.TOUCH_START, this.touchStart, this)
        this.node.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this)

    }



    touchStart(e: cc.Touch) {

    }


    paintPixel(x: number, y: number, color: cc.Color) {
        x = Math.floor(x)
        y = Math.floor(y)
        let width = Math.floor(this.imageData.width)
        let height = Math.floor(this.imageData.height)
        let data = this.imageData.data;
        let rowW = width * 4//一行的长度

    }

    paintPoint(x: number, y: number, color: cc.Color) {
        let data = this.imageData.data;
        let rowW = Math.floor(this.imageData.width) * 4//一行的长度
        x = Math.floor(x)
        let srow = Math.floor(y);//行开始位置
        let startX = srow * rowW + x * 4;//列开始位置
        cc.log(' startX ', startX, ' data count ', data.byteLength, color)
        data[startX + 0] = color.r;
        data[startX + 1] = color.g;
        data[startX + 2] = color.b;
    }

    touchEnd(e: cc.Touch) {
        if (!this.imageData) {
            this.imageData = new ImageData()
            this.capture.render();
            this.imageData.data = this.capture.getData()
            cc.log(' this.imageData.data ',this.imageData.data.length)
            var spriteFrame: cc.SpriteFrame = this.pic_sprite.spriteFrame;
            var rect = spriteFrame.getRect();
            this.imageData.width = rect.width;
            this.imageData.height = rect.height;
            cc.log('this.imageData.width  ',this.imageData.width,' this.imageData.height ',this.imageData.height,this.imageData.width * this.imageData.height * 4)
            cc.log(' iamgeData ',this.imageData)
        }
        let pos = e.getLocation()
        pos = this.node.convertToNodeSpaceAR(pos)
        cc.log(' pos ', pos.x, pos.y)
        this.paintPoint(pos.x, pos.y, this.g.fillColor)
        let texture = this.pic_sprite.spriteFrame.getTexture();
        // cc.log(' texture ', texture.width, texture.height)
        texture.initWithData(this.imageData.data, this.capture.getPixelFormat(), this.pic_sprite.node.width, this.pic_sprite.node.height)
        // this.drawing(pos)
        // this.pointList.push(pos)
    }

    onButtonClear() {
        this.g.clear();
        this.colorGroup[this.group].length = 0;
    }

    onButtonClick() {
        let info = new FillColorInfo(this.pointList);
        // this.colorInfo.push(info)
        if (!this.colorGroup[this.group]) {
            this.colorGroup[this.group] = []
        }
        this.colorGroup[this.group].push(info)

        this.pointList = [];
    }

    onButtonPaintClick() {
        this.draw(this.colorGroup[this.group])
    }

    drawing(element) {

        let g = this.g;
        // g.lineWidth = 10;
        // for (let index = 0; index < posList.length; index++) {
        //     const element = posList[index];
        let x = element.x;
        let y = element.y;
        g.moveTo(x, y)
        g.circle(x, y, 50)
        // }
        g.close();
        // g.stroke();
        g.fill();
    }
    draw(group: FillColorInfo[]) {
        if (group.length <= 0) {
            return;
        }

        let ctx: cc.Graphics = this.g;
        for (let index = 0; index < group.length; index++) {
            const element = group[index];
            this.drawShape(ctx, element.getPointList())
        }

        ctx.stroke()
        ctx.fill();


    }

    drawShape(ctx: cc.Graphics, pointList: cc.Vec2[]) {
        if (pointList.length <= 0) {
            return;
        }
        let first = pointList[0]
        ctx.moveTo(first.x, first.y);
        cc.log(' pointList.length ', pointList.length)

        if (pointList.length == 1) {
            ctx.circle(first.x, first.y, 1)
        } else if (pointList.length == 2) {
            ctx.lineTo(pointList[1].x, pointList[1].y);

        } else if (pointList.length == 3) {
            // ctx.arc(pointList[1].x, pointList[1].y, pointList[2].x, pointList[2].y, 1.5 * Math.PI);
            ctx.quadraticCurveTo(pointList[1].x, pointList[1].y, pointList[2].x, pointList[2].y);

            // ctx.fill();            
        } else {
            ctx.bezierCurveTo(pointList[1].x, pointList[1].y, pointList[2].x, pointList[2].y, pointList[3].x, pointList[3].y);
            // this.drawShape(ctx, pointList.splice(0, 4))
        }
    }
    // update (dt) {}
}
